<script setup lang="ts">
  import { loginByPasswordAPI } from '@/api/login'
  import { useUserStore } from '@/store/user'
  import { ref } from 'vue'

  //表单实例
  const formRef = ref<UniHelper.UniFormsInstance>()

  //获取store
  const store = useUserStore()

  //表单数据
  const formData = ref({
    account: '55555',
    password: '123456',
  })

  //表单验证
  const formRules = {
    account: {
      rules: [{ required: true, errorMessage: '请输入账号' }],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入密码' },
        { minLength: 6, errorMessage: '密码至少6位' },
      ],
    },
  }
  //表单提交
  const onSubmit = async () => {
    await formRef.value?.validate!()
    const res = await loginByPasswordAPI(formData.value)
    store.setToken(res)
    uni.switchTab({
      url: '/pages/task/task',
    })
  }
</script>

<template>
  <view class="container">
    <view class="form-container">
      <uni-forms :model="formData" ref="formRef" :rules="formRules">
        <!-- 账号输入框 -->
        <uni-forms-item name="account">
          <view class="input-container">
            <uni-easyinput
              class="input-field"
              :input-border="false"
              v-model="formData.account"
              type="text"
              placeholder="请输入账号"
            />
          </view>
        </uni-forms-item>

        <!-- 密码输入框 -->
        <uni-forms-item name="password">
          <view class="input-container">
            <uni-easyinput
              class="input-field"
              :input-border="false"
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
            />
          </view>
        </uni-forms-item>

        <!-- 忘记密码 -->
        <view class="forgot-password">
          <text>忘记密码？</text>
        </view>

        <view class="login-button">
          <button @click="onSubmit" class="btn">登录</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    padding: 40rpx;
    background: #ffffff;
    height: 100vh;
  }

  .form-container {
    margin-top: 100rpx;
  }

  .input-container {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    padding: 20rpx 0;

    .input-field {
      flex: 1;
      font-size: 32rpx;
    }
  }

  .forgot-password {
    margin-top: 30rpx;
    text-align: right;

    text {
      font-size: 28rpx;
      color: #007aff;
    }
  }

  .login-button {
    margin-top: 80rpx;

    .btn {
      background-color: #fadcd9;
      color: #fff;
      border-radius: 50rpx;
      font-size: 32rpx;
      height: 90rpx;
      line-height: 90rpx;
    }
  }
</style>
